<div id="subContainer" class="wrapper wrapper-content">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>选项管理</h5>
            <div class="ibox-tools">
                <a :href="applicationContextRootPath + 'pages/sign/add.html'"
                   data-pjax class="btn btn-primary btn-xs">新建</a>
            </div>
        </div>
        <div class="ibox-content">

            <div class="row">
                <div class="col-sm-3" v-for="(filter, index) in searchParams.filters" :key="index" v-if="filter.showAble">
                    <div class="input-group">
                        <input type="text" placeholder="请输入关键词" class="input-sm form-control search-input"
                               v-model="filter.fieldValue" v-bind:fieldName="filter.fieldName"
                               v-bind:fieldValue="filter.fieldValue"
                               v-bind:compare="filter.compare"
                               :disabled="filter.readonly"
                               @keyup.enter.native="search"
                               :placeholder="filter.placeholder" :readonly="filter.readonly" clearable>
                    </div>
                </div>
                <div class="input-group">
                            <span class="input-group-btn">
                                                <button type="button" class="btn btn-sm btn-primary"
                                                        v-on:click="pagequery()"> 搜索</button> </span>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>操作</th>
                        <th>编号</th>
                        <th>客户名称</th>
                        <th>项目名称</th>
                        <th>受益人</th>
                        <th>担保金额</th>
                        <th>担保期限</th>
                        <th>保函类型</th>
                        <th>转开/直开</th>
                        <th>合作单位</th>
                        <th>出函银行</th>
                        <th>业务经理</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item, index) in items">
                        <td scope="row">{{(searchParams.page - 1) * 10 + index + 1}}</td>
                        <td>
                            <button type="button" v-on:click="edit(item)" class="btn btn-primary btn-xs">修改</button>
                            <button type="button" v-on:click="zipDownload(item)" class="btn btn-primary btn-xs">下载</button>
                            <button type="button" v-on:click="deleteItem(item)" class="btn btn-danger btn-xs">删除
                            </button>
                        </td>
                        <td>{{item.code}}</td>
                        <td>{{item.cusName}}</td>
                        <td>{{item.projectName}}</td>
                        <td>{{item.beneficiary}}</td>
                        <td>{{item.guaranteeAmount}}</td>
                        <td>{{item.guaranteeDate}}</td>
                        <td>{{item.busType}}</td>
                        <td>{{item.invoiceType}}</td>
                        <td>{{item.company}}</td>
                        <td>{{item.bankName}}</td>
                        <td>{{item.creatorName}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <pageination :total="searchParams.total" :size="searchParams.pageSize" :page="searchParams.page"
                         :changge="pageFn"></pageination>

        </div>
    </div>

</div>

<script src="/js/validateIsMain.js"></script>
<script>
    var vue = new Vue({
        el: '#subContainer',
        data: {
            applicationContextRootPath: '/',
            searchParams: {
                orderBy: 'update_at desc',
                page: 1,
                pageSize: 15,
                filters: [
                    {
                        showAble: true,
                        readonly: false,
                        placeholder: "请输入客户名称",
                        fieldName: "cusName",
                        compare: "like",
                        fieldValue: ""
                    },
                    {
                        showAble: true,
                        readonly: false,
                        placeholder: "请输入出函银行",
                        fieldName: "bankName",
                        compare: "like",
                        fieldValue: ""
                    },{
                        showAble: true,
                        readonly: false,
                        placeholder: "请输入项目名称",
                        fieldName: "projectName",
                        compare: "like",
                        fieldValue: ""
                    }
                ],
                isLock: ''
            },
            items: [{}]
        },
        created: function () {
        },
        methods: {
            pagequery: function () {
                const that = this;
                AJAX.POST_JSON('api/sign/index', this.searchParams, function (resp) {
                    that.items = resp.data.records;
                    console.log(item)
                    that.searchParams.page = resp.data.current;
                    that.searchParams.total = resp.data.total;
                })
            },
            pageFn: function (val) {
                this.searchParams.page = val;
                this.pagequery();
            },
            edit: function (item) {
                sessionStorage.setItem('editParams', item.id);
                $.pjax({
                    url: mvm.applicationContextRootPath + 'pages/sign/edit.html',
                    container: '.page-container'
                });
            },
            zipDownload: function (item) {
                // window.open('/api/sign/zip' + '?id='+ item.id +'&x-token=' + sessionStorage.getItem('access_token'));
                fetch('/api/sign/zip' + '?id='+ item.id +'&x-token=' + sessionStorage.getItem('access_token'))
                    .then(response => response.blob())
                    .then(blob => {
                        const link = document.createElement('a');
                        link.href = URL.createObjectURL(blob);
                        link.download = item.company + '-' + item.bankName + '.zip';
                        link.click();
                    });
            },
            deleteItem: function (item) {
                var that = this;
                confirm("删除后，不可恢复，请确认?", "", function (isConfirm) {
                    if (isConfirm) {
                        AJAX.DELETE('api/sign', item, function (resp) {
                            toastr.success(resp.msg);
                            that.pagequery();
                        })

                    } else {
                        //after click the cancel
                    }
                }, {confirmButtonText: '确认', cancelButtonText: '取消', width: 400});

            }
        }
    });
</script>
